<style type="text/css">
    .fade.in {
        opacity: 1;
    }
    .fade {
        opacity: 0;
        -webkit-transition: opacity 0.15s linear;
        -moz-transition: opacity 0.15s linear;
        -ms-transition: opacity 0.15s linear;
        -o-transition: opacity 0.15s linear;
        transition: opacity 0.15s linear;
    }
    .tooltip {
        position: absolute;
        top:-30px;
        left: 50px;
        display: none;
        visibility: visible;
        padding: 5px;
        font-size: 11px;
        opacity: 0;
    }
    .tooltip-inner {
        max-width: 200px;
        min-width: 160px;
        padding: 3px 8px;
        color: white;
        text-align: center;
        text-decoration: none;
        background-color: rgb(241, 113, 113);
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
    }
    .tooltip.top .tooltip-arrow {
        bottom: 0;
        left: 50%;
        margin-left: -80px;
        border-width: 5px 5px 0;
        border-top-color: rgb(241, 113, 113);
    }
    .tooltip-arrow {
        position: absolute;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
    }
</style>
<div id="main">
    <h1>Sign up, it's FREE!</h1>
    <form class="" method="post" action="login">
        <div class="row email" title="Email">
            <input type="text" id="email" name="email" placeholder="Email" />
            <div class="tooltip fade top in" id="tooltip-email">
                <div class="tooltip-arrow"></div>
                <div class="tooltip-inner" id="tooltip-email-val">您的E-mail格式有误,请重新输入</div>
            </div>
        </div>
        <div class="row pass">
            <input type="password" id="password" name="password" placeholder="Password" />
            <div class="tooltip fade top in" id="tooltip-password">
                <div class="tooltip-arrow"></div>
                <div class="tooltip-inner" id="tooltip-password-val">密码长度必须 > 6 </div>
            </div>
        </div>
        <div class="row pass">
            <input type="password" id="password_again" name="password_again" placeholder="Password (repeat)" disabled="true" />
            <div class="tooltip fade top in" id="tooltip-password_again">
                <div class="tooltip-arrow"></div>
                <div class="tooltip-inner" id="tooltip-password_again-val">再次密码有误,请重新输入</div>
            </div>
        </div>
        <!-- The rotating arrow -->
        <div class="arrowCap"></div>
        <div class="arrow"></div>
        <p class="meterText">Password Meter</p>
        <input type="submit" value="Register" />
    </form>
</div>